<template>
  <div id="tags-v1">
    <div class="flex">
      <div v-if="isLabel" class="sub-label info text-right m-r-16 shrink-0">已选标签</div>
      <div>
        <el-tag
          v-for="tag in selectedTags"
          :key="tag"
          closable
          disable-transitions
          @close="tagClose(tag)">
          {{ tag }}
        </el-tag>
        <el-select
          v-if="selectedTags.length < limit"
          id="tags"
          ref="selectInput"
          v-model="input"
          :placeholder="placeholder"
          multiple
          filterable
          remote
          :size="size"
          no-data-text="没有匹配的标签"
          :loading="isLoading"
          loading-text="匹配中..."
          :remote-method="searchTags"
          @change="tagsChange"
          @visible-change="selectVisible">
          <el-option-group key="提示-选择标签" label="请选择标签">
            <el-option
              v-for="tag in resultTags"
              :key="tag.title"
              :value="tag.title"
              :disabled="tag.disabled">
              <el-tooltip v-if="tag.disabled" content="不能添加重复的标签">
                <div>{{ tag.title }}</div>
              </el-tooltip>
            </el-option>
          </el-option-group>
        </el-select>
      </div>
    </div>
    <div v-if="quickAdd" class="flex">
      <div v-if="isLabel" class="sub-label info text-right m-r-16 shrink-0">标签库</div>
      <div>
        <el-tag
          v-for="tag in hotTags"
          :key="tag.id"
          type="info"
          :size="size"
          @click="addTag(tag.title)">
          {{ tag.title }} ({{ tag.count }})
        </el-tag>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TagSelect',
  props: {
    selectedTags: { // 已选择的标签
      type: Array,
      required: true,
    },
    isLabel: { // 是否显示说明
      type: Boolean,
      default: true,
    },
    quickAdd: { // 是否允许从标签库快速选择标签
      type: Boolean,
      default: true,
    },
    tagCreate: { // 是否允许创建标签
      type: Boolean,
      default: true,
    },
    limit: { // 最大标签数限制
      type: Number,
      default: 5,
    },
    size: String,
  },
  data() {
    return {
      hotTags: [],
      input: [],
      isLoading: false, // 正搜索
      resultTags: [], // 搜索到的标签
    };
  },
  computed: {
    placeholder() { return `请输入标签（${this.selectedTags.length}/${this.limit}）`; },
  },
  methods: {
    // 搜索标签
    searchTags(value) {
      const validValue = value.trim(); // 标签没有前后空格
      if (!validValue) return; // 不搜素空标签
      this.isLoading = true;
      this.resultTags = []; // 清空搜索结果
      this.$api.tags.search({ title: validValue })
        .then(res => this.handleSearchResult(res.data, validValue))
        .catch(() => {})
        .then(() => { this.isLoading = false; });
    },
    // 处理搜索标签返回的数据
    handleSearchResult(tags, value) {
      const reTags = tags.map(tag => ({
        title: tag.title,
        disabled: this.tagExist(tag.title),
      }));
      const resultWithValue = tags.map(tag => tag.title).includes(value); // 结果中有没有搜索的标签
      if (!resultWithValue && this.tagCreate) { // 搜索结果中没有，并且允许创建标签时，添加备选项
        reTags.unshift({ title: value, disabled: this.tagExist(value) });
      }
      this.resultTags = reTags;
    },
    // 监听 el-select 的值，将变化后的内容转移到 selectedTags，并清空el-elect，显示placeholder
    tagsChange(val) {
      this.selectedTags.push(val[0]);
      this.resultClear();
    },
    // el-select 下拉菜单激活
    selectVisible(state) { if (!state) this.resultClear(); },
    // 清空结果
    resultClear() {
      this.input = []; // 清空输入框的值，显示placeholder
      this.resultTags = []; // 清空搜索结果
      this.$nextTick(() => {
        if (this.$refs.selectInput) this.$refs.selectInput.blur();
      });
    },
    // 标签是否已经选择
    tagExist(tag) { return tag && this.selectedTags.includes(tag); },
    // 加载热门标签
    loadHotTags() {
      this.$api.tags.hot()
        .then((res) => { this.hotTags = res.data; })
        .catch(() => {});
    },
    // 快速添加标签
    addTag(tag) {
      if (this.selectedTags.length < this.limit && !this.tagExist(tag)) this.selectedTags.push(tag);
    },
    // 删除已选标签
    tagClose(tag) { this.selectedTags.splice(this.selectedTags.indexOf(tag), 1); },
  },
  created() {
    if (this.quickAdd) this.loadHotTags();
  },
};
</script>

<style></style>
